<template>
  <div class="menu-wrapper"
       style="zoom: 0.8;">
    <div class="menu-title">
      <span class="iconfont top"></span>
      <span class="title-text">校 园 趣 坛</span>
    </div>
    <div class="content">
      <div class="person-info"
      @click="GoToUserInfoPage"
        >
        <img
        :src="!loginFlag?userInfo.avatar:`https://com-tsing.oss-cn-hangzhou.aliyuncs.com/default.png`" alt="" />
        <div class="person-name">
          <div class="name"
          style="cursor: pointer;"
          v-if="loginFlag" @click.stop="LoginPage_Jump">{{'  前 往 登 录'}}</div>
          <div class="name" 
          style="cursor: pointer;"
          v-if="!loginFlag">{{userInfo.nickname}}</div>
          <span class="detail" v-if="!loginFlag">{{userInfo.email}}</span>
        </div>
      </div>
      <div class="menu-content">
        <div class="menu-list">
          <div class="menu-list-item"
               v-for="item in menuData"
               :key="item.id"
               @click="item.path=='loginOut'?PageJump_(item.path):PageJump(item.path)">
            <div class="block"></div>
            <span class="iconfont"
                  :class="item.iconFont"></span>
            <div class="item-name">{{ item.menuName }}</div>
          </div>
          <!-- 模式切换 -->
          <!-- <div class="menu-list-item">
            <div class="block"></div>
            <span class="iconfont icon-yueliang"></span>
            <div class="item-name">Dark Mode</div>
            <div class="btn">
              <input class="check-ipt"
                     type="checkbox"
                     id="checks" />
              <label class="check-lable"
                     for="checks"
                     @click="changeDark"></label>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["PageJump"],
  data () {
    return {
      menuData: [
        {
          id: 1,
          menuName: "首页",
          iconFont: "icon-caidan",
          path: "HomeIndexPage"
        },
        {
          id: 2,
          menuName: "照片墙",
          iconFont: "icon-gouwu",
          path: "PhotoIndexPage"
        },
        {
          id: 3,
          menuName: "表白墙",
          iconFont: "icon-category",
          path: "ConfessionIndexPage"

        },
        {
          id: 4,
          menuName: "校园聊斋",
          iconFont: "icon-order-fill",
          path: "TalkIndexPage"
        },
        {
          id: 7,
          menuName: "项目介绍",
          iconFont: "icon-bingtu",
          path: ""

        },
        {
          id: 10,
          menuName: "退出登录",
          iconFont: "icon-jinru",
          path: "loginOut"

        },
      ],
      themeDark: false,
      userInfo: {}, // 用户信息,
      loginFlag: true
    };
  },
  mounted () {
    document.body.setAttribute("theme-color", "light");
    this.GetUserInfo()
  },
  methods: {
    GetUserInfo () {
      // 判断是否存在用户数据与Token
      // let Token = this.$store.state.user.token;
      // let UserInfo = this.$store.state.user.user;
      // console.log(11111,this.$store.state.user.user);
      // console.log(11111,this.$store.state.user.token);
      if (this.$store.state.user.token != null) {
        this.userInfo = this.$store.state.user.user
        this.$forceUpdate()
        this.loginFlag = false
      } else {
        this.loginFlag = true
      }
    },
    LoginPage_Jump () {
      this.$router.replace("/login")
    },
    PageJump_ (path) {
      console.log(path);
      this.$store.commit("user/removeUser", "")

      this.$store.commit("user/removeToken", "")
      
      this.GetUserInfo()

      this.$message.success("登出成功!")
      // 页面跳转
      this.$router.replace("/index")
      location.reload()
      // localStorage.removeItem("user")
    },
    changeDark () {
      if (!this.theme) {
        document.body.setAttribute("theme-color", "dark");
        this.theme = !this.theme;
      } else {
        document.body.setAttribute("theme-color", "light");
        this.theme = !this.theme;
      }
    },

    GoToUserInfoPage(){
      this.$router.push("/index/UserIndexPage")
    }
  },
};
</script>

<style lang="scss" scoped>
@import url(../assets/iconfont/iconfont.css);
@import url(../assets/themecss/theme.scss);
.top {
  width: 45px;
  height: 45px;
  background-image: url(../assets/微信图片_20230331204058.png);
  background-size: 100% 100%;
}
.iconfont {
  font-family: 'iconfont' !important;
  font-style: normal;
  font-size: 25px;
  color: var(--theme-text-color);
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.menu-wrapper {
  overflow: hidden;

  height: 98%;
  width: 90px;
  border-radius: 20px;
  background-color: var(--bg-color);
  padding: 20px;
  box-sizing: border-box;
  transition: 0.6s;
  overflow: hidden;
  .menu-title {
    height: 70px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(229, 233, 236);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    .title-text {
      margin-left: 10px;
      font-family: 'BasketBall';
      font-size: 30px;
      vertical-align: middle;
      // opacity: 0;
      display: none;

      white-space: nowrap;
      color: var(--theme-info-text-color);
    }
    .icon-24gf-bag {
      font-size: 30px;
      padding-left: 10px;
      color: rgb(103, 56, 223);
    }
  }
  .content {
    // text-align: center;
    .person-info {
      margin-top: 20px;
      white-space: nowrap;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        vertical-align: middle;
      }
      .person-name {
        margin-left: 15px;
        vertical-align: middle;
        opacity: 0;
        transition: 0.6s;
        overflow: hidden;
        color: var(--theme-info-text-color);
        display: inline-block;
        .name {
          font-size: 20px;
          font-weight: 600;
        }
        .detail {
          font-size: 12px;
        }
      }
    }
    .menu-content {
      margin-top: 20px;
      .menu-list {
        .menu-list-item {
          cursor: pointer;
          width: 100%;
          height: 50px;
          font-size: 18px;
          position: relative;
          border-radius: 10px;
          padding-left: 10px;
          white-space: nowrap;
          .block {
            width: 6px;
            height: 25px;
            background: rgb(101, 57, 225);
            position: absolute;
            right: -10px;
            top: 13px;
            transition: 0.5s;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            opacity: 0;
          }
          .item-name {
            line-height: 50px;
            display: inline-block;
            margin-left: 10px;
            font-size: 18px;
            color: var(--theme-text-color);
            font-weight: 100;
            transition: 0.6s;
            opacity: 0;
          }
          &:hover {
            background-color: var(--theme-hover-menu-color);
            .item-name {
              color: var(--theme-hover-color);
            }
            .iconfont {
              color: var(--theme-hover-color);
            }
            .block {
              opacity: 1;
            }
          }
          .btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
            opacity: 0;
            margin-left: 10px;
            .check-ipt {
              display: none;
            }
            .check-lable {
              display: inline-block;
              width: 40px;
              height: 20px;
              border-radius: 20px;
              background: rgb(101, 58, 223);
              /* border: 1px solid #eee; */
              cursor: pointer;
              position: relative;
              overflow: hidden;
            }
            .check-lable::before {
              display: inline-block;
              content: '';
              width: 15px;
              height: 15px;
              border-radius: 50%;
              background: white;
              position: absolute;
              left: 3px;
              top: 50%;
              transform: translateY(-50%);
              transition: all 0.3s;
            }

            .check-ipt:checked + .check-lable::before {
              left: 20px;
              background: rgb(32, 30, 43);
            }
            .check-ipt:checked + .check-lable::after {
              width: 100%;
            }
          }
        }
      }
    }
  }
  &:hover {
    width: 300px;
    .menu-title {
      .title-text {
        display: block;
      }
    }

    .person-info {
      .person-name {
        opacity: 1;
      }
    }
    .menu-content {
      .menu-list {
        .menu-list-item {
          .item-name {
            opacity: 1;
          }
          .btn {
            opacity: 1;
          }
        }
      }
    }
  }
}
.person-info:hover .name{
  text-decoration: underline;
}
</style>
